ui5-switch {
    margin: 8px;
}

#styled1::part(slider) {
    height: 1.75rem;
    background: orange;
    border-color: green;
}

#styled1::part(text-on) {
    color: blue;
    font-weight: bold;
}

#styled1::part(text-off) {
    color: magenta;
    font-weight: bold;
}

#styled1::part(handle) {
    background: orange;
    border-color: green;
}

.styled2::part(slider) {
    height: 0.75rem;
    background: purple;
    border-color: white;
}

.styled2::part(text-on) {
    font-size: .5rem;
    color: white;
}

.styled2::part(text-off) {
    font-size: .5rem;
    color: white;
}

.styled2::part(handle) {
    background: purple;
    border-color: white;
}

.switch1auto {
    background-color: var(--sapBackgroundColor);
}

.switch2auto {
    display: flex
}

.switch3auto {
    width: 200px
}

.switch4auto {
    width: 120px;
    height: 80px;
}

.switch5auto {
    width: 150px;
    height: 100px;
}

.switch6auto {
    width: 200px;
    height: 100px;
}

.switch7auto {
    width: 200px;
    height: 200px;
}

.switch-form {
    border: 1px solid var(--sapList_BorderColor);
    border-radius: var(--sapElement_BorderCornerRadius);
    padding: 1rem;
}

#formValidation ui5-switch:invalid{
    outline: 2px solid var(--sapNegativeColor);
}
